<template>
  <view class="content">
    <view class="title_box">
      <view style="display: flex;align-items: center;">
        <text class="green_ornament"></text>
        <text>实验任务</text>
      </view>
      <view class="card_tag_green" @click="shows = true;">选择</view>
    </view>
    <view class="li_box">
      <view class="li_content">
        <view class="li_label">需求编号</view>
        <view class="li_input">
          <input class="border_input" v-model="paprNo" disabled type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验员</view>
        <view class="li_input">
          <picker @change="bindPickerYuan" :value="index" :range="yuan">
          <input class="border_input" v-model="form.experimenter" disabled type="text" />
          </picker>
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验助手</view>
        <view class="li_input">
          <picker @change="bindPickerZhu" :value="index" :range="zhu">
          <input class="border_input" v-model="form.experimentAssistant" disabled type="text" />
        </picker>
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验对象</view>
        <view class="li_input">
          <input class="border_input" v-model="form.experimentSubject" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验类别</view>
        <view class="li_input">
          <input class="border_input" v-model="form.experimentCategory" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验阶段</view>
        <view class="li_input">
          <input class="border_input" v-model="form.experimentStage" readonly type="text" />
        </view>
      </view>
    </view>
    <view class="btn_box">
      <view class="red_btn" @click="cancel">取消</view>
      <view class="green_btn" @click="submitForm">发布</view>
    </view>
    <!--  -->
    <u-overlay :show="shows" @click="show = false">
    <view class="warp">
			<view class="rect" @tap.stop>
        <div style="text-align: center;font-size: 18px;font-weight: bold;">选择编号</div>
        <view class="li_boxs" v-for="item in choose">
        <view class="card_green_box">
          <view class="card_title_box">
            <view>需求编号：{{ item.requirementNo }}</view>
            <view class="card_tag_green" @click="chooseNo(item)">选择</view>
          </view>
          <u-line color="#c2c9c4" />
          <view class="card_li_box">实验时间:{{ item.reason }}</view>
          <view class="card_li_box">项目名称:{{ item.itemName }}</view>
          <view class="card_li_box">原料属性:{{ item.rawMaterialProperty }}</view>
          <view class="card_li_box">样品来源:{{ item.sampleSource }}</view>
          <view class="card_li_box">发起理由:{{ item.reason }}</view>
          <u-line color="#c2c9c4" />
        </view>
      </view>
      </view>
		</view>
  </u-overlay>
    <!--  -->
  </view>
</template>
<script>
import { idleList,taskAdd,chooseRequirList,taskEdit } from '../api/api.js'
export default {
  data() {
    return {
      shows:false,
      zhu:[],
      yuan:[],
      seaZhu:[],
      seaYuan:[],
      styles: {
        borderColor: "#1a512c",
      },
      show: false,
      form: {
        experimentAssistant: '',//实验助手
        experimentAssistantId: '',//实验助手id
        experimentCategory: '',//实验类别
        experimentStage: '',//实验阶段
        experimentSubject: '',//实验对象
        experimenter: '',//实验员
        experimenterId: '',//实验员id
        requirementId: '',//实验需求id
    },
    paprNo:'',
    choose:[],
    id:''
    };
  },
  methods:{
    chooseList(){
      chooseRequirList().then(res=>{
        console.log(res.data,'choose');
        this.choose = res.data.data;
      })
    },
    idle(){
      idleList({}).then(res=>{
        console.log(res.data,'idle');
        if(res.data.code==200){
          this.yuan = res.data.data.map((item)=>item.nickName);
          this.zhu = res.data.data.map((item)=>item.nickName);
          this.seaZhu = res.data.data;
          this.seaYuan = res.data.data;
        }
      })
    },
    bindPickerYuan(e){
      const value = e.detail.value;
      this.form.experimenter = this.seaYuan[value].nickName;
      this.form.experimenterId = this.seaYuan[value].userId;
    },
    bindPickerZhu(e){
      const value = e.detail.value;
      this.form.experimentAssistant = this.seaZhu[value].nickName;
      this.form.experimentAssistantId = this.seaZhu[value].userId;
    },
    cancel(){
      uni.navigateBack({
               delta: 1
            });
    },
    chooseNo(i){
      this.form.requirementId = i.id;
      this.paprNo = i.requirementNo;
      this.shows = false;
    },
    submitForm(){
      const isEmptyField = Object.keys(this.form).some(key => {
        return this.form[key] === '' || this.form[key] === null || this.form[key] === undefined;
      });
      if(isEmptyField){
        uni.showToast({
            title: '请输入完整',
            duration: 2000,
            icon:'none'
          });
      }else{
        if(this.id == ''){
          taskAdd(this.form).then(res=>{
        if(res.data.code==200){
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
          setTimeout(()=>{
            this.clearForm();
            uni.navigateBack({
               delta: 1
            });
          },1000)
        }else{
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon:'none'
          });
        }
      })
        }else{
          this.form.id = this.id;
          taskEdit(this.form).then(res=>{
        if(res.data.code==200){
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
          setTimeout(()=>{
            this.clearForm();
            uni.navigateBack({
               delta: 1
            });
          },1000)
        }else{
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon:'none'
          });
        }
      })
        }
        
      }
      
    },
    clearForm(){
      this.form = {
        experimentAssistant: '',//实验助手
        experimentAssistantId: '',//实验助手id
        experimentCategory: '',//实验类别
        experimentStage: '',//实验阶段
        experimentSubject: '',//实验对象
        experimenter: '',//实验员
        experimenterId: '',//实验员id
        requirementId: '',//实验需求id
    }
    this.id = '';
    this.paprNo = '';
    }
  },
  onShow(){
    this.idle();
    this.chooseList();
  },
  onLoad(options){
    if(options.flag== 'edit'){
      let row  = uni.getStorageSync('expertTaskDetail');
      this.form = {
        experimentAssistant: row.experimentAssistant,//实验助手
        experimentAssistantId: row.experimentAssistantId,//实验助手id
        experimentCategory: row.experimentCategory,//实验类别
        experimentStage: row.experimentStage,//实验阶段
        experimentSubject: row.experimentSubject,//实验对象
        experimenter: row.experimenter,//实验员
        experimenterId: row.experimenterId,//实验员id
        requirementId: row.requirementId,//实验需求id
    }
    this.paprNo = row.requirementNo;
    this.id = row.id;
    }
  }
};
</script>
<style lang="scss" scoped>
.pop_box {
  width: 600rpx;
  box-sizing: border-box;
  padding: 20rpx;
  background-color: #e3ede2;
  font-size: 32rpx;
  border-radius: 10rpx;
  color: #1a512c;
  font-weight: 700;
  .pop_title {
    margin-bottom: 20rpx;
  }
  .pop_btn_box {
    margin-top: 40rpx;
    width: 100%;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .back_btn {
      width: 200rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10rpx;
      background-color: #fff;
      color: #1a512c;
      font-weight: 700;
      border: #1a512c 2rpx solid;
    }
    .submit_btn {
      background-color: #1a512c;
      color: #fff;
    }
  }
}
.content {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 30rpx;
  background-color: #e3ede2;
  font-size: 32rpx;
  color: #1a512c;
  .title_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .green_ornament {
      width: 8rpx;
      height: 30rpx;
      background-color: #1a512c;
      margin-right: 20rpx;
    }
  }
  .li_box {
    margin-top: 20rpx;
    
  }
}
.li_content {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  .li_label {
    font-weight: 700;
    margin-right: 30rpx;
    width: 20%;
  }
  .li_input {
    width: 80%;
    .border_input {
      border: 2rpx solid #1a512c;
      border-radius: 10rpx;
      height: 50rpx;
      width: 100%;
      text-align: center;
    }
  }
}
.textarea_border {
  margin-top: 20rpx !important;
  height: 200rpx !important;
}
.btn_box {
  color: #fff;
  font-size: 34rpx;
  font-weight: 700;
  width: 100%;
  height: 100rpx;
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .red_btn {
    // background-color: #d93434;
    background-color: #fff;
    border: #1a512c 2rpx solid;
    border-radius: 10rpx;
    color: #1a512c;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 300rpx;
  }
  .green_btn {
    background-color: #1b9c46;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 300rpx;
  }
}
.card_tag_green {
  background-color: #1b9c46;
  color: #fff;
  padding: 10rpx 26rpx;
  font-size: 24rpx;
  border-radius: 8rpx;
}
.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 90vw;
		height: 40vh;
		background-color: #fff;
    border-radius: 5px;
    padding: 10px 0 10px 0;
    overflow-y: scroll;
	}
  .li_boxs {
    width: 90vw;
    padding: 20rpx;
    box-sizing: border-box;
    .card_green_box {
      padding: 20rpx;
      background-color: #b9e2c7;
      color: #1b9c46;
      border-radius: 10rpx;
      font-size: 28rpx;
      .card_title_box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10rpx;
        font-weight: 700;
        .card_tag_green {
          background-color: #1b9c46;
          color: #fff;
          padding: 5px 8px;
          font-size: 24rpx;
          border-radius: 8rpx;
        }
      }
      .card_li_box {
        margin-bottom: 10rpx;
        font-weight: 700;
      }
    }
  }
</style>
